<template>
  <div class="chart-main-container">
    <div class="chart-wrapper">
      <div class="chart">
        <div ref="chartRef" class="chart-container" :style="containerStyle"></div>
      </div>

      <div class="chart-pie">
        <div class="content">
          <div class="num">12889.04</div>
          <div class="unit">kgCO₂e</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import * as echarts from "echarts";

  const chartRef = ref(null);
  const props = defineProps({
    data: {
      type: Object,
      required: true,
    },
    width: {
      type: Number,
      default: 250,
    },
    height: {
      type: Number,
      default: 250,
    },
  });

  onMounted(() => {
    if (chartRef.value) {
      const chart = echarts.init(chartRef.value);
      const option = {
        color: ["#5cc4a7", "#8170cb", "#f9a647", "#4bacc6"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          backgroundColor: "rgba(50,50,50,0.9)",
          borderColor: "#333",
          textStyle: {
            color: "#fff",
            fontSize: 14,
          },
        },
        legend: {
          top: "0",
          width: "240px",
          //right: "center",
          textStyle: {
            color: "#666",
            fontSize: 14,
          },
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
        },
        series: [
          {
            name: "材料类别",
            type: "pie",
            radius: ["60%", "75%"],
            center: ["50%", "50%"], // Adjusted to exact center
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 5,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              scale: true,
              scaleSize: 5,
              label: {
                show: true,
                fontSize: "18",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "材料获取" },
              { value: 0, name: "运输过程" },
            ],
          },
        ],
        backgroundColor: "#fff",
      };
      chart.setOption(option);

      // Handle window resize
      const handleResize = () => {
        chart.resize();
        updatePiePosition();
      };
      window.addEventListener("resize", handleResize);

      // Ensure proper cleanup
      onUnmounted(() => {
        window.removeEventListener("resize", handleResize);
        chart.dispose();
      });
    }
  });

  // 计算容器样式
  const containerStyle = computed(() => {
    return {
      width: typeof props.width === "number" ? `${props.width}px` : props.width,
      height:
        typeof props.height === "number" ? `${props.height}px` : props.height,
    };
  });
</script>

<style lang="scss" scoped>
.chart-main-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .chart-wrapper {
    position: relative;
    width: 250px;  // 保持与图表相同的宽度
    height: 250px; // 保持与图表相同的高度
    margin: 0 auto; // 水平居中
  }

  .chart {
    position: relative;
    width: 100%;
    height: 100%;
    
    .chart-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }
  }

  .chart-pie {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    aspect-ratio: 1/1;

    .content {
      text-align: center;
      .num {
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
      .unit {
        font-size: 14px;
        color: #666;
        margin-top: 5px;
      }
    }
  }
}
</style>
